
import string from './css.js' //引入css.js导出的内容


const player = {
    n:0,
    time:0,
    id:undefined,
    ui:{
        demo: document.querySelector('#demo'),
        demo2: document.querySelector('#demo2')
    },
    events : {
        '#btnPause':'pause',
        '#btnSlow':'slow',
        '#btnNormal':'normal',
        '#btnFast':'fast'
    },
    init: () => {  //每个对象按理来说都需要一个初始化方法
        player.bindEvents()
        player.play()
    },
    bindEvents:()=>{
        for(let key in player.events){ //遍历event哈希表
            if(player.events.hasOwnProperty(key)){ 
//如果key是自身属性而不是继承属性。为了避免访问到隐藏属性，比如一些前端新人Object.prototype.x=1,这时候就会遍历到x了
                const value = player.events[key]
                document.querySelector(key).onclick=player[value]
            }
        }
    },
    run: () => {
        player.n += 1
        if (player.n > string.length) {
            window.clearInterval(player.id)  //结束setInterval
            return
        }
        player.ui.demo.innerText = string.substring(0, player.n)
        player.ui.demo2.innerHTML = string.substring(0, player.n)
        player.ui.demo.scrollTop = player.ui.demo.scrollHeight //自动拉滚动条，等于内容的高度，但是这样也不完全正确，应该还要减去滚动条本身的高度
    },
    play: () => {
        player.id = setInterval(player.run, player.time)
    },
    pause: () => {
        window.clearInterval(player.id)
    },
    slow: () => {
        player.pause()
        player.time = 300
        player.play()
    },
    normal: () => {

        player.pause()
        player.time = 100
        player.play()
    },
    fast: () => {
        player.pause()
        player.time = 0
        player.play()
    }

}
player.init()

